<template>
  <div class="category-chart" ref="chartRef" style="width: 100%; height: 350px;"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const option = {
  tooltip: {
    trigger: 'item',
    backgroundColor: '#fff',
    borderColor: '#ccc',
    borderWidth: 1,
    textStyle: { color: '#333' },
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 20,
    top: 30,
    itemWidth: 16,
    itemHeight: 10,
    icon: 'roundRect',
    textStyle: {
      fontSize: 14,
      color: '#666'
    },
    data: [
      '生活随笔', '运维部署', '后端开发', '网络爬虫',
      '资源软件', '数据库', '前端开发', '博客文档'
    ]
  },
  series: [
    {
      name: '分类统计',
      type: 'pie',
      radius: ['55%', '75%'],
      center: ['65%', '55%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 4
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 2, name: '生活随笔' },
        { value: 3, name: '运维部署' },
        { value: 8, name: '后端开发' },
        { value: 1, name: '网络爬虫' },
        { value: 2, name: '资源软件' },
        { value: 3, name: '数据库' },
        { value: 2, name: '前端开发' },
        { value: 7, name: '博客文档' }
      ]
    }
  ],
  color: [
    '#3399FF', '#33CCFF', '#99E6B3', '#FFD666',
    '#FF9C6E', '#FF85C0', '#B37FEB', '#B5B5FF'
  ]
}

onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(option)
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (chartInstance) chartInstance.dispose()
})

function resizeChart() {
  if (chartInstance) chartInstance.resize()
}
</script>

<style scoped>
.category-chart {
  width: 100%;
  height: 350px;
}
</style>
